import React from 'react'
import { Form, Input, Button,InputNumber } from 'antd';
import Tip from "../../common/tip"
const FormItem = Form.Item;
import axios from '../../../common/request'
import notificationWithIcon from "../../common/notificationWithIcon";
import modalDisplay from '../../common/informModal'

class ApplyActivities extends React.Component {
    state = {
        confirmDirty: false,
        hasApply:false,
    };
    componentDidMount() {
        axios.get('/api/common/apply/status/'+this.props.match.params.id,)
            .then((response)=> {
                if (response.data.status.code== 2002) {
                    this.setState({
                        hasApply:true,
                        confirmDirty:false,
                    })
                    modalDisplay('info','您已经报名过此活动',"",()=>this.props.history.push("/console/user/enroll/activity"))
                }
                else{
                    axios.get('/api/activity/apply/full/'+this.props.match.params.id,)
                        .then((response)=> {
                            if (response.data.status.code== 2006) {
                                this.setState({
                                    hasApply:true,
                                    confirmDirty:false,
                                })
                                modalDisplay('info','活动名额已满',"",()=>window.location.href="/activity/detail/"+this.props.match.params.id)
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                }
            })
            .catch(function (error) {
                console.log(error);
            });
        // To disabled submit button at the beginning.
        this.props.form.validateFields();
    }
    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, values) => {
            values.activityId=this.props.match.params.id
            if(values.userDuty===undefined)
                delete values.userDuty
            if(values.userDepart===undefined)
                delete values.userDepart
            axios.post('/api/activity/apply',values)
                .then((response)=> {
                    if(response.data.status.code===1){
                        modalDisplay('success',"报名活动成功","",()=>this.props.history.push(`/console/user/enroll/activity`))
                    }
                    else{
                        modalDisplay('error',response.data.status.message,"",null)
                    }
                })
                .catch(function (error) {
                    modalDisplay('error',"报名活动失败",error.response,null)
                    console.log(error);
                });
        });
    }
    handleConfirmBlur = (e) => {
        const value = e.target.value;
        this.setState({ confirmDirty: this.state.confirmDirty || !!value });
    }
    hasErrors = (fieldsError) => {
        return Object.keys(fieldsError).some(field => fieldsError[field]);
    }
    render() {
        const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched} = this.props.form;
        const formItemLayout = {
            labelCol: {
                sm: { span: 4 },
            },
            wrapperCol: {
                sm: { span: 16 },
            },
        };
        const tailFormItemLayout = {
            wrapperCol: {
                sm: {
                    span: 6,
                    offset: 4,
                },
            },
        };
        const nameError =  isFieldTouched('userName') &&getFieldError('userName');
        const phoneError =  isFieldTouched('userPhone') &&getFieldError('userPhone');
        return (
            <div>
                {this.state.hasApply?
                 (<div/>):
                (<div>
                    <Tip title="报名活动"/>
                    <Form onSubmit={this.handleSubmit}>
                        <FormItem
                            {...formItemLayout}
                            label="姓名"
                            validateStatus={nameError ? 'error' : ''}
                            help={nameError || ""}
                        >
                            {getFieldDecorator('userName', {
                                rules: [{ required: true, message: '请输入姓名姓名!', whitespace: false }],
                            })(
                                <Input  onBlur={this.handleConfirmBlur}/>
                            )}
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="联系电话"
                            validateStatus={phoneError ? 'error' : ''}
                            help={phoneError || ""}
                        >
                            {getFieldDecorator('userPhone', {
                                rules: [{ required: true, message: '请输入联系电话!', whitespace: false }],
                            })(
                                <Input  onBlur={this.handleConfirmBlur}/>
                            )}
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="单位名称"
                        >
                            {getFieldDecorator('userDepart', {
                            })(
                                <Input  onBlur={this.handleConfirmBlur}/>
                            )}
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="职务"
                        >
                            {getFieldDecorator('userDuty', {
                            })(
                                <Input  onBlur={this.handleConfirmBlur}/>
                            )}
                        </FormItem>
                        <FormItem {...tailFormItemLayout}>
                            <Button size="large" type="primary" htmlType="submit" disabled={this.hasErrors(getFieldsError())}>立即报名</Button>
                        </FormItem>
                    </Form>
                </div>)}
            </div>
        );
    }
}
const ApplyActivity = Form.create()(ApplyActivities);
export default ApplyActivity